<template>
  <div>
    <div style="margin: 10px 0">
      文书名称：<el-input style="width: 200px" placeholder="请输入文书名称" suffix-icon="el-icon-search" v-model="bookName"></el-input>
      案号<el-input style="width: 200px" placeholder="请输入案号" suffix-icon="el-icon-message" class="ml-5" v-model="caseno"></el-input>
      承办人：<el-input style="width: 200px" placeholder="请输入承办人" suffix-icon="el-icon-user" class="ml-5" v-model="undertaker"></el-input>
      审理法院：
      <el-select v-model="value" placeholder="请选择审理法院">
        <el-option
          v-for="item in options1"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <br>
      <div style="margin: 10px 0">
        办结时间：<el-date-picker v-model="endTime" type="date" placeholder="选择日期"></el-date-picker>
        公开类型：
        <el-select v-model="value" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
        <el-button type="warning" @click="reset">重置</el-button>
        <el-button type="primary" @click="exp" class="ml-5">导出 <i class="el-icon-top"></i></el-button>
      </div>
    </div>
    <el-table :data="tableData" border stripe :header-cell-class-name="headerBg" size="mini">
      <el-table-column  prop="id" label="序号" width="50"></el-table-column>
      <el-table-column prop="bookName" label="文书名称" width="250"></el-table-column>
      <el-table-column prop="caseno" label="案号" width="250"></el-table-column>
      <el-table-column label="审理法院" width="250">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].courtid==1">淮安中级法院</p>
          <p v-if="tableData[scope.$index].courtid==2">淮安市清江浦区人民法院</p>
          <p v-if="tableData[scope.$index].courtid==3">淮安市淮安区人民法院</p>
          <p v-if="tableData[scope.$index].courtid==4">淮安市淮阴区人民法院</p>
          <p v-if="tableData[scope.$index].courtid==5">淮安市涟水县人民法院</p>
          <p v-if="tableData[scope.$index].courtid==6">淮安市金湖县人民法院</p>
          <p v-if="tableData[scope.$index].courtid==7">淮安市盱眙县人民法院</p>
        </template>
      </el-table-column>
      <el-table-column prop="undertaker" label="承办人" width="100"></el-table-column>
      <el-table-column prop="endTime" label="办结时间" :formatter="dateFormat" width="100px"></el-table-column>
      <el-table-column label="操作人" width="100">
        <template>
          <p>{{ user.userName }}</p>
        </template>
      </el-table-column>
      <el-table-column label="公开类型" width="100">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].isinternet==0">文书不公开</p>
          <p v-if="tableData[scope.$index].isinternet==1">文书公开</p>
        </template>
      </el-table-column>
      <el-table-column label="进程状态" width="100">
        <template slot-scope="scope">
          <p v-if="tableData[scope.$index].status==0">未办理</p>
          <p v-if="tableData[scope.$index].status==1">审批中</p>
          <p v-if="tableData[scope.$index].status==2">已办结</p>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template v-slot="scope">
          <el-button type="success" @click="handleEdit(scope.row)">查看<i class="el-icon-view"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="padding: 10px 0">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import moment from 'moment'

export default {
  name: 'completion_status',
  data () {
    return {
      bookName: '',
      caseno: '',
      undertaker: '',
      endTime: '',
      value: '',
      options1: [
        { value: '1', label: '淮安中级法院' },
        { value: '2', label: '淮安市清江浦区人民法院' },
        { value: '3', label: '淮安市淮安区人民法院' },
        { value: '4', label: '淮安市淮阴区人民法院' },
        { value: '5', label: '淮安市涟水县人民法院' },
        { value: '6', label: '淮安市金湖县人民法院' },
        { value: '7', label: '淮安市盱眙县人民法院' }
      ],
      options2: [
        { value: '0', label: '文书不公开' },
        { value: '1', label: '文书公开' }
      ],
      tableData: [],
      total: 0,
      pageNum: 1,
      pageSize: 5,
      status: 1,
      user: JSON.parse(sessionStorage.getItem('user')),
      headerBg: 'headerBg'
    }
  },
  created () {
    this.load()
  },
  methods: {
    load () {
      this.request.get('/d-book/pageStatus',
        {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            status: this.status
          }
        }).then(res => {
        console.log('--------------------')
        console.log(res)
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },
    // 时间格式化
    dateFormat (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format('YYYY-MM-DD')
    },
    reset () {
      this.bookName = ''
      this.caseno = ''
      this.undertaker = ''
      this.endTime = ''
      this.value = ''
      this.load()
    },
    handleSizeChange (pageSize) {
      console.log(pageSize)
      this.pageSize = pageSize
      this.load()
    },
    handleCurrentChange (pageNum) {
      console.log(pageNum)
      this.pageNum = pageNum
      this.load()
    }
  }
}
</script>

<style>
.headerBg {
  background: #eee!important;
}
</style>
